<template>
	<view>
		<topbar title="设置支付密码" jt_c="2" background="background:#222222;color:#fff;"></topbar>
		<view class="content">
			<view class="dis_f_co_c_c" style="width: 100%;">
				
				<view class="login dis_f_c_c" style="margin-bottom: 42rpx;">
					<u-input type="password" v-model="password" placeholder="请设置支付密码" maxlength="6"></u-input>
				</view>
				
				<view class="login dis_f_c_c" style="margin-bottom: 42rpx;">
					<image src="../../static/login/code.png" mode="aspectFit"></image>
					<u-input type="text" v-model="code" placeholder="请输入验证码" maxlength="4"></u-input>
					<u-toast ref="uToast"></u-toast>
					<u-verification-code :seconds="seconds" @end="end" @start="start" ref="uCode" @change="codeChange">
					</u-verification-code>
					<u-button @tap="getCode">{{tips}}</u-button>
				</view>
				
				<view class="btn dis_f_c_c" @click="submit">
					确认
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				password: '',
				password2: '',
				tips: '',
				seconds: 60,
				code:'',
			};
		},
		onLoad() {
			this.getuser()
		},
		methods:{
			getuser(){
				this.$.ajax(1, 'post', 'index/checktokens', {
					uid:uni.getStorageSync('uid'),
					token:uni.getStorageSync('token')
				}, (res) => {
					console.log(res)
					if(res.code == 9){
						this.$.ti_shi('token已过期，请重新登陆')
					uni.clearStorageSync()
						setTimeout( () => {
							uni.navigateTo({
								url:'/pages/login/login'
							})
						}, 1000)
					return;
					}
					else{
						this.$.ajax(1, 'post', 'index/getuser', {
					uid:uni.getStorageSync('uid'),
					token:uni.getStorageSync('token')
				}, (res) => {
					console.log(res)
					if(res.code == 1){
					this.user = res.userinfo
					}
					
				})	
					}
				})
				
			},
			codeChange(text) {
				this.tips = text;
			},
		getCode() {
			
			if (this.$refs.uCode.canGetCode) {
				// 模拟向后端请求验证码
				uni.showLoading({
					title: '正在获取验证码'
				})
				this.$.ajax(1, 'post', 'wxpay/sms', {
					mobile:this.user.mobile
				}, (res) => {
					console.log(res)
					if(res.code == 1){
					uni.hideLoading();
						// 这里此提示会被this.start()方法中的提示覆盖
						this.$u.toast('验证码已发送');
						// 通知验证码组件内部开始倒计时
						this.$refs.uCode.start();
					}else{
						this.$.ti_shi(res.msg)
					}
				})
			} else {
				this.$u.toast('倒计时结束后再发送');
			}
		},
		end() {
			this.$u.toast('倒计时结束');
		},
		start() {
			this.$u.toast('发送成功');
		},
		submit(){
			this.$.ajax(1, 'post', 'index/setpaypassword', {
				uid:uni.getStorageSync('uid'),
				token:uni.getStorageSync('token'),
				code:this.code,
				password:this.password
			}, (res) => {
				console.log(res)
				if(res.code == 1){
				this.$.ti_shi(res.msg)
				this.timer = setTimeout( () => {
				    uni.navigateTo({
				    	url:'/pages/mine/she_zhi'
				    })
				}, 1000)
				}else{
					this.$.ti_shi(res.msg)
				}
			})
		}
		}
	}
</script>

<style lang="scss">
.content {
		width: 100%;
		padding: 0 64rpx;
		top: 240rpx;
		z-index: 998;
		position: absolute;

		.login {
			width: 100%;
			height: 100rpx;
			background-color: #F6F6F6;
			border-radius: 20rpx;
			padding: 30rpx 36rpx;

			image {
				width: 28.25rpx;
				height: 37.82rpx;
				margin-right: 15.75rpx;
			}
		}

		.btn {
			width: 100%;
			height: 92rpx;
			background-color: #E23C63;
			border-radius: 46rpx;
			color: #FFF;
			font-size: 32rpx;
		}
	}
</style>
